<template>
	<view>
		<view v-for="(item, index) in dataList" :key="index">
			<view class="list" @click="chooseClick(item, index)">
				<view class="left">
					<image class="img" :src="item.avatar" alt="" />
					<view class="isCheck" v-if="showCancelButton || item.isClick > 0">
						<u-icon name="checkmark-circle-fill" color="rgba(194, 126, 21, 1)" size="15"
							style="background-color: yellow;"></u-icon>
					</view>
				</view>
				<view class="right">
					<view class="title">
						{{ item.name }}
						<view class="tag">评分：{{ Number(item.score).toFixed(2) }} 分</view>
					</view>
					<view class="rate">
						<view class="rate-value">
							<view class="rate-mask"></view>
							<u-rate :count="count" v-model="score" readonly active-color="rgba(194, 126, 21, 1)"
								size="14" gutter="2">
							</u-rate>
							<!-- <u-rate :count="count" v-model="item.score" readonly active-color="rgba(194, 126, 21, 1)"
									size="14" gutter="2">
									</u-rate> -->
							<view class="column-center" style="margin-left: 10rpx;">技师</view>
						</view>
						<view v-if="!isChoosePerson">
							<view class="rate-text" v-if="item.status === '空闲'"
								style="font-size: 27rpx;color: green;width: 100rpx;">可预约</view>
							<view class="rate-text" style="font-size: 22rpx;color: red;"
								v-else-if="item.status === '已预约'">
								需等待{{$methods.convertMinutesToHoursMinutes(item.timeDiffInMinutes)}}</view>
							<view class="rate-text" v-else
								:style="{ fontSize: '27rpx', width: '100rpx', color: item.status === '休息' ? 'grey' : 'black' }">
								{{ item.status }}
							</view>
						</view>
					</view>
					<view v-if="isChoosePerson">
						<view class="des">
							{{ item.projectName }}
						</view>
						<view class="time-desc">预约时间：{{ item.subscribeStartTime }}</view>
					</view>
					<view v-else class="des">
						<view class="synopsis">{{ item.synopsis }}</view>
						<view class="" style="display: flex;justify-content: space-between;"
							@click.stop="clickTechnician(item)">
							<text style=" color:#faa040;margin-left: 5rpx;">
								详情
							</text>
						</view>
					</view>
					<view class="money-box">
						<view class="red">
							<u-icon name="rmb" color="#fe4d4f" size="15"></u-icon>
							<view class="money">{{ item.price }}</view>
							<view class="rmb-text">原价</view>
						</view>
						<view v-if="ChooseTechbician">
							<!-- 底部弹出框的按钮 -->
							<view v-if="showCancelButton" class="preview notClick" @click.stop="cancelChoose(item, index)">
								取消选择
							</view>
							<!-- 选择技师页面按钮 -->
							<view v-else>
								<view v-if="item.status === '休息'" class="preview">选择</view>
								<view v-else>
									<view class="preview isClick" v-if="chooseTechnicianNumber[item.id] > 0"
										@click.stop="chooseClick(item, index)">再次选择</view>
									<view v-else class="preview notClick" @click.stop="chooseClick(item, index)">选择</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-box" v-if="showCancelButton">
				<view class="goods-item" v-for="(gItem, gIndex) in goodsConfig" :key="gIndex">
					<view class="goods-info">
						<view class="goods-name">{{ gItem.productName }}</view>
						<view class="goods-price">￥{{ gItem.originalPrice }}</view>
					</view>
					<!-- <u-number-box min="0" max="1"> -->
					<view
						v-if="goodsNumData[item.id + item.projectId + item.subscribeStartTime.slice(0, item.subscribeStartTime.length - 3)][gItem.id]"
						class="minus" @click="clickMinusItem(item, gItem)">
						<uni-icons type="minus" size="20" color="#c27e15"></uni-icons>
					</view>
					<!-- <text
              slot="input"
              style="width: 30rpx;text-align: center;"
              class="input"
            >{{ goodsNumData[item.id + item.projectId + item.subscribeStartTime.slice(0, item.subscribeStartTime.length - 3)][gItem.id] || 0 }}</text> -->
					<view v-else class="plus" @click="clickPlusItem(item, gItem)">
						<uni-icons type="plus" size="20" color="#c27e15"></uni-icons>
					</view>
					<!-- </u-number-box> -->
				</view>
			</view>
		</view>
		<you-popup :popupVisible="tipDialog" popupTitle="技师确认" :safeArea="false" @popupClose="tipDialog = false"
			@cancel="tipDialog = false" @confirm="confirmChoose">
			<view slot="popupContent" class="popup-content">
				<view>该技师正在服务中，需要等待，确定需要预约吗</view>
			</view>
		</you-popup>
	</view>
</template>

<script>
	import YouPopup from '@/components/you-popup2'
	export default {
		name: 'ProTechnicianListComponents',
		components: {
			YouPopup
		},
		data() {
			return {
				dataList: [],
				count: 5,
				score: 0,
				chooseItem: {},
				chooseIndex: null,
				tipDialog: false,
				goodsConfig: [],
				goodsNumData: {}
			}
		},
		props: {
			technicianList: {
				type: Array,
				default: []
			},
			ChooseTechbician: {
				type: Boolean,
				default: true
			},
			transferData: {
				type: Array,
				default: []
			},
			showCancelButton: {
				type: Boolean,
				default: false
			},
			isChoosePerson: {
				type: Boolean,
				default: false
			},
			AppointmentTime: {
				type: String,
				default: ''
			},
			goodsList: {
				type: Array,
				default: []
			},
			goodsNumConfig: {
				type: Object,
				default: {}
			}
		},
		watch: {
			technicianList: {
				handler(newVal, oldVal) {
					this.dataList = uni.$u.deepClone(newVal)
				},
				deep: true
			},
			goodsList: {
				handler(newVal, oldVal) {
					this.goodsConfig = uni.$u.deepClone(newVal)
				},
				deep: true
			},
			goodsNumConfig: {
				handler(newVal, oldVal) {
					this.goodsNumData = uni.$u.deepClone(newVal)
				},
				deep: true
			}
		},
		computed: {
			chooseTechnicianNumber() {
				return this.$store.getters.chooseTechnicianNumber
			}
		},
		created() {
			var date = new Date(this.AppointmentTime)
			var currentTimestamp = date.getTime() // 获取当前时间的时间戳（毫秒数）
			console.log(this.technicianList, this.transferData, this.goodsList, this.goodsNumConfig);
			this.dataList = this.technicianList.map(function(item) {
				var serviceEndTime = item.serviceEndTime // 获取服务结束时间的时间戳
				var timeDiffInMs = serviceEndTime - currentTimestamp // 计算时间差（毫秒数）
				var timeDiffInMinutes = Math.floor(timeDiffInMs / 60000) // 将毫秒数转换为分钟数并向下取整
				item.timeDiffInMinutes = timeDiffInMinutes // 将计算得到的分钟数保存到对象中
				return item
			})
			this.goodsConfig = uni.$u.deepClone(this.goodsList)
			this.goodsNumData = uni.$u.deepClone(this.goodsNumConfig)
		},
		methods: {
			chooseClick(item, index) {
				if (item.status === '休息') {
					return
				}
				if (item.status === '忙碌') {
					this.chooseItem = item
					this.chooseIndex = index
					this.tipDialog = true
					return
				}
				if (this.chooseTechnicianNumber[item.id] > 0) {
					this.$emit('chooseAgainClick', item, index)
					return
				}
				this.$emit('chooseClick', item, index)
			},
			confirmChoose() {
				this.tipDialog = false
				if (this.chooseTechnicianNumber[this.chooseItem.id] > 0) {
					this.$emit('chooseAgainClick', this.chooseItem, this.chooseIndex)
					return
				}
				this.$emit('chooseClick', this.chooseItem, this.chooseIndex)
			},
			cancelChoose(item) {
				this.$emit('deselect', item)
			},
			imageClick(item) {
				this.$emit('imageClick', item)
			},
			clickTechnician(item) {
				this.$emit('toDetail', item)
			},
			clickMinusItem(item, gItem) {
				if (!this.chooseTechnicianNumber[item.id] > 0) {
					uni.showToast({
						title: '请先添加技师后再选择附加商品',
						icon: 'none',
						mask: true
					})
					return
				}
				const goodsNumStr = item.id + item.projectId + item.subscribeStartTime.slice(0, item.subscribeStartTime
					.length - 3)
				this.$emit('minusGoods', item, gItem, this.goodsNumData[goodsNumStr][gItem.id])
			},
			clickPlusItem(item, gItem) {
				if (!this.chooseTechnicianNumber[item.id] > 0) {
					uni.showToast({
						title: '请先添加技师后再选择附加商品',
						icon: 'none',
						mask: true
					})
					return
				}
				const goodsNumStr = item.id + item.projectId + item.subscribeStartTime.slice(0, item.subscribeStartTime
					.length - 3)
				this.$emit('plusGoods', item, gItem, this.goodsNumData[goodsNumStr][gItem.id])
			}
		}

	}
</script>

<style lang="scss" scoped>
	.list {
		margin: 36rpx 0;
		padding: 0 10rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(230, 230, 230, 1);

		.left {
			position: relative;
			width: 182rpx;
			height: 198rpx;

			.img {
				width: 182rpx;
				height: 182rpx;
				border-radius: 13.93rpx;
			}

			.show {
				position: absolute;
				bottom: 0;
				left: 21%;
				width: 103rpx;
				height: 37rpx;
				line-height: 37rpx;
				opacity: 1;
				border-radius: 32rpx;
				background: rgba(255, 105, 40, 1);
				font-size: 20rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}

			.isCheck {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}

		.right {
			width: 68%;
			text-align: left;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 12rpx;
				display: flex;

				.tag {
					width: 150rpx;
					height: 43rpx;
					opacity: 1;
					border-radius: 13rpx;
					background: rgba(255, 241, 238, 1);
					text-align: center;
					line-height: 43rpx;
					margin-left: 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(255, 50, 5, 1);
				}
			}

			.distance {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				margin-bottom: 12rpx;

				.name-right {
					display: flex;

					.distant {
						font-size: 22rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 31.86rpx;
						color: rgba(102, 102, 102, 1);
						margin: 0 5rpx 0 6rpx;
						transform: translateY(5rpx);
					}
				}
			}

			.rate {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(194, 126, 21, 1);

				.rate-value {
					display: flex;
				}
			}

			.des {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-top: 10rpx;
			}

			.time-desc {
				margin-top: 6rpx;
				font-size: 24rpx;
				color: #999;
			}

			.synopsis {
				margin: 14rpx 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.preview {
				// width: 106rpx;
				height: 41rpx;
				padding: 0 20rpx;
				border-radius: 38rpx;
				line-height: 41rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 500;
				background: rgba(236, 236, 236, 1);
				color: rgba(153, 153, 153, 1);
			}

			.isClick {
				background: #c27e15;
				color: #fff;
			}

			.notClick {
				border: 1rpx solid rgba(194, 126, 21, 1);
				color: rgba(194, 126, 21, 1);
				background-color: #fff;
			}

			.money-box {
				display: flex;
				justify-content: space-between;
				margin-top: 12rpx;

				.red {
					display: flex;
					align-items: center;

					.money {
						font-size: 37rpx;
						font-weight: 600;
						// letter-spacing: -0.28rpx;
						line-height: 47rpx;
						color: rgba(254, 77, 79, 1);
					}

					.rmb-text {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(254, 77, 79, 1);
						// margin-left: 12rpx;
						// transform: translateY(10rpx);
					}
				}

				.grey {
					display: flex;
					align-items: center;
					color: rgba(102, 102, 102, 1);
					// margin: 0 30rpx;

					.money {
						font-size: 20rpx;
						font-weight: 400;
						// letter-spacing: -0.2rpx;
						line-height: 32.99rpx;
						transform: translateY(10rpx);
					}

					.rmb-text {
						font-size: 15rpx;
						font-weight: 400;
						// letter-spacing: 0rpx;
						line-height: 26.98rpx;
						// transform: translateY(14rpx);
						// margin-left: 12rpx;
					}
				}

				.pre-box {
					width: 92rpx;
					height: 41rpx;
					opacity: 1;
					border-radius: 32rpx;
					line-height: 41rpx;
					background: rgba(194, 126, 21, 1);
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #fff;
				}
			}
		}
	}

	.goods-box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.goods-item {
			display: flex;
			align-items: center;
			height: 50rpx;
			margin: 0 6rpx 6rpx;
			padding: 0 20rpx;
			border: 2rpx solid #d0d3d6;
			border-radius: 30rpx;
			font-size: 22rpx;

			.goods-info {
				display: flex;
				align-items: center;

				.goods-price {
					margin: 0 10rpx;
				}
			}
		}
	}

	.popup-content {
		padding: 0 30rpx 40rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.rate-mask {
		width: 23vw;
		height: 3vh;
		position: absolute;
		z-index: 5;
		opacity: 0;
	}
</style>